<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h1>{{ msg }}</h1>
  <ul>
    <todo-item
      v-for="item of todos"
      v-bind:item1="item"
    ></todo-item>
  </ul>
</div>

<script src="js/vue.js"></script>
<script>
  // Vue.component("组件名", { ...组件选项 })
  Vue.component("todo-item", {
    props: [ "item1" ],
    template: "<li>{{ item1.text }}</li>",
    created() {},
  })

  const app = new Vue({
    el: "#app",
    data: {
      msg: "hello vue!",
      todos: [
        { text: '学习 JavaScript' },
        { text: '学习 Vue' },
        { text: '整个牛项目' }
      ]
    }
  })
</script>
</body>
</html>
